import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
Vue.directive("aaa", {
  inserted(el, binding) {
    el.style.color = binding.value;
  },
});
Vue.directive("test", {
  update(el, binding) {
    if (binding.value.trim().length >= 3 && binding.value.trim().length <= 7) {
      el.style.color = "green";
    } else {
      el.style.color = "red";
    }
  },
});
Vue.directive("left", {
  inserted(el, binding) {
    el.style.transform = `translateX(${binding.value}px)`;
  },
});
Vue.directive("active", {
  inserted(el, binding) { 
    const list = el.children
    for (let i = 0; i < list.length; i++) {
      list[i].onclick = function () {
        for (let j = 0; j < list.length; j++) { 
          list[j].style.background = "";
        } 
        this.style.background = 'red';
      }
    }
    const index = binding.value
    list[index].style.background = 'red'
  }
})

new Vue({
  render: (h) => h(App),
}).$mount("#app");
